<template>

    <div>

      <el-select v-model="dateValue"  style="width: 160px;" @change="getYear">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value" >
    </el-option>
  </el-select>


  <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name='年度报表'

              style=" margin-left: 800px;margin-top: -40px; "
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              
              <el-button type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>

              </download-excel>
     

         <div id="as" style="width: 60%; height: 400px" display: inline-block>


         


        </div>


         <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="addtime"
        label="缴费日期" :formatter="dateForma">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="应收金额">
      </el-table-column>
      <el-table-column
        prop="dzmHisCarePaylog.paymentPlatform"
        label="支付类型">

        <template scope="scope">
          <span v-if="scope.row.dzmHisCarePaylog == null ">暂无支付类型</span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 0 " > 现金 </span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 1 " > 微信 </span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 2" > 支付宝 </span>

        
        </template>

      </el-table-column>
      <el-table-column
        prop="dzmHisCareOrder.allAmount"
        label="处方费">

        <template scope="scope">
          <span v-if="scope.row.dzmHisCareOrder == null ">0</span>
          <span v-else> {{  scope.row.dzmHisCareOrder.allAmount  }} </span>
        
        </template>

      </el-table-column>

      <el-table-column prop="status" label="状态" >


<template scope="scope">
  <span v-if="scope.row.status == '0'">未支付</span>
  <span v-else-if="scope.row.status == '1'">已支付</span>
  <span v-else-if="scope.row.status == '2'">确认收款</span>
  <span v-else-if="scope.row.status == '3'">申请退款</span>
  <span v-else-if="scope.row.status == '4'">已退款</span>
  <span v-else-if="scope.row.status == '5'">部分支付</span>
  <span v-else-if="scope.row.status == '6'">完成交易</span>
  <span v-else-if="scope.row.status == '7'">部分退款</span>
  <span v-else> 其它 </span>
</template>

</el-table-column>
     
    </el-table>
    <el-pagination
  background
  layout="prev, pager, next"
  :total=pages @current-change="handleCurrentChange">
</el-pagination>

    </div>
  
</template>
<script>

import moment from "moment"; //导入文件



import { monthlyReport } from '../../api/incomeAndExpenses/statistics.js'

import { annualStatistics } from '../../api/incomeAndExpenses/statistics.js'


export default {
   name: '',
   components: {
     
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {

      //表格数据
      tableData: [],


      //分页页数
      pages:0,


      //获取下拉框的值
      dateValue:'',


      //下拉框的值
      options: [],


      //存储12个月的收入金额
      monthtimes:[],

      //导出excel文件的数据
      title: "",
      json_fields: {
        "一月":'January',
        "二月":'February',
        "三月":'March',
        "四月":'April',
        "五月":'May',
        "六月":'June',
        "七月":'July',
        "八月":'August',
        "九月":'September',
        "十月":'October',
        "十一月":'November',
        "十二月":'December',
      },
    DetailsForm: [
        {
          January: 0,
          February: 0,
          March: 0,
          April: 0,
          May: 0,
          June: 0,
          July: 0,
          August: 0,
          September: 0,
          October: 0,
          November: 234,
          December: 0
        },
       
      ],


       
     }
   },
   computed: {
     
   },
   watch: {
     
   },
   mounted() {


    this.getTableData(1);


    let nowDate = new Date();
 

      let yearSize=nowDate.getFullYear()-2017+1

      for(let i= 0; i<yearSize; i++ ){

      let  year = {
          value: (2017+i)+'-01-01',
          label: (2017+i)+'年'
        }


        this.options[i]=year


      };

      this.dateValue= this.options[0].value


      this.oneYearsData('2017-01-01')
  

     
   },

   methods: {
  

    showInfo2(monthtime1,monthtime2, monthtime3, monthtime4, monthtime5,monthtime6, monthtime7, monthtime8,monthtime9,monthtime10,monthtime11,monthtime12){
      
      console.log(monthtime1,monthtime2, monthtime3, monthtime4, monthtime5,monthtime6, monthtime7, monthtime8,monthtime9,monthtime10,monthtime11,monthtime12)
      
      
      var myChart2 = this.$echarts.init(document.getElementById('as'));

        myChart2.setOption({
          tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'            
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '40%',
      data: [monthtime1, monthtime2, monthtime3, monthtime4,monthtime5, monthtime6, monthtime7,monthtime8,monthtime9,monthtime10,monthtime11,monthtime12]

  
    }
  ]
  
  
})


    },

    
    getTableData(num){

      
monthlyReport(num).then(rep =>{

console.log(rep.data)


this.tableData=rep.data.list


this.pages=rep.data.pages*10




})

},


    //页面改变时触发
    handleCurrentChange(num){

      console.log(`当前页${num}`)

      this.getTableData(num)

    },
        //时间格式化转换7
        dateForma: function (row, column, data) {
      return moment.unix(data).format("YYYY-MM-DD ");
    },

    getYear(year){

      this.oneYearsData(year)


      console.log(year)


    },
    //获取12个月的数据
    oneYearsData(year){

      let y=year.substring(0,4);

      this.title=y+'年度报表'


      annualStatistics(year).then(rep =>{

        if(rep.data.length!=0){ 


        
  for(let m=1; m<13; m++){

  this.monthtimes[m]=0

  }


for(let i=0;i<rep.data.length;i++){


  this.monthtimes[rep.data[i].monthtime]=rep.data[i].sumamount-0



}


              this.DetailsForm[0].January=this.monthtimes[1]+'元'
           this.DetailsForm[0]. February=this.monthtimes[2]+'元'
          this.DetailsForm[0].   March=this.monthtimes[3]+'元'
          this.DetailsForm[0].  April=this.monthtimes[4]+'元'
          this.DetailsForm[0].  May=this.monthtimes[5]+'元'
          this.DetailsForm[0].  June=this.monthtimes[6]+'元'
          this.DetailsForm[0].  July=this.monthtimes[7]+'元'
          this.DetailsForm[0].  August=this.monthtimes[8]+'元'
          this.DetailsForm[0].  September=this.monthtimes[9]+'元'
          this.DetailsForm[0]. October=this.monthtimes[10]+'元'
          this.DetailsForm[0]. November=this.monthtimes[11]+'元'
          this.DetailsForm[0]. December=this.monthtimes[12]+'元'


console.log(this.DetailsForm[0].November)

console.log(rep.data[0].sumamount)

console.log(rep.data)
console.log( this.monthtimes[1], this.monthtimes[2], this.monthtimes[3], this.monthtimes[4], this.monthtimes[5], this.monthtimes[6], this.monthtimes[7],this.monthtimes[8],this.monthtimes[9],this.monthtimes[10],this.monthtimes[11],this.monthtimes[12]  )


this.showInfo2( this.monthtimes[1], this.monthtimes[2], this.monthtimes[3], this.monthtimes[4], this.monthtimes[5], this.monthtimes[6], this.monthtimes[7],this.monthtimes[8],this.monthtimes[9],this.monthtimes[10],this.monthtimes[11],this.monthtimes[12]  )





}else{


  
        this.$message.error('暂无数据');
      
        this.showInfo2( 0,0,0,0,0,0,0,0,0,0,0,0  )


}

})

    }

     
   }
};
</script>
<style lang='' scoped>
</style>